<!-- 艺人的，我的报名 -->
<template>
	<view class="artistSignUp">
		
		<!-- 没有tabs -->
		<!-- <view class="tabs">
			<u-tabs class="order-box-t" activeStyle="color: #E27C8A;fontSize: 32rpx" lineHeight="6" lineColor="#E27C8A"
				inactiveStyle="color: #0F0D21;fontSize: 32rpx" :list="tabsListData" @change="setTabs">
			</u-tabs>
		</view> -->
		
		<view class="content">
			<view class="item" v-for="(res,index) in listData" :key="index" >
				<ListItem  :tabsList="tabsList" :data="res"></ListItem>
			</view>
		</view>
		
		
		<uni-load-more v-if="listData.length > 0" :status="loadingType"></uni-load-more>
		
		<noData v-if="listData.length < 1"></noData>


	</view>
</template>

<script>
	// api请求
	import {
		getArtistListApi, //艺人-报名列表
	} from '@/api/activity.js'

	
	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'


	// 页面组件
	import ListItem from './components/list-item.vue'

	export default {
		components: {
			ListItem
		},
		data() {
			return {
				tabsListData: [{
						name: '全部',
						value: ''
					}, {
						name: '待付款',
						value: 0
					},
					{
						name: '待接单',
						value: 7
					},
					{
						name: '待服务',
						value: 1
					},
					{
						name: '进行中',
						value: 2
					}, {
						name: '已完成',
						value: 3
					}, {
						name: '已退款',
						value: 4
					},
					{
						name: '已取消',
						value: 5
					},
					{
						name: '已评价',
						value: 6
					}
				], // tabs数据
				
				tabsData: '', // tabs选择数据
				
				listData: [], // 列表数据
				
				tabsList: [], // 项目的数据
				
				current: 1, // 当前页
				
				
				loadingType: 'loading', // 是否显示更多
				
			};
		},
		computed:{
			...mapState({
				hrefUrl: state => state.user.hrefUrl,
				isShow: state => state.user.isShow
			})
		},
		onHide() {
			// 当离开页面而不是离开应用时，恢复正常
			this.setIsShow(true)
		},
		onShow() {
			// 拦截
			if (!this.isShow) return
			this.init()
		},
		
		//滑动到底部
		onReachBottom() {
			this.current++
			this.getArtistList({
				pageNum: this.current,
				pageSize: 10
			})
			console.log('滑动到底部');
		},
		
		methods: {
			...mapActions('home', ['getCate']),
			...mapMutations(['setTabCurrent', 'setIsShow']),
			
			
			/**
			 * 初始化
			 */
			init() {
				// 没有离开页面，只要发起请求后也同样恢复正常
				this.setIsShow(true)
				
				this.listData = []
				
				this.current = 1

				// loading状态
				this.loadingType = 'loading'
				
				// 初始化单位
				this.setUnitInit()
				
				this.getArtistList({
					pageNum:this.current,
					pageSize:10
				})

			},
			
			/**
			 * 初始化单位
			 */
			async setUnitInit() {
				// 获取分类数据
				let arr = await this.getCate()
				this.tabsList = arr.map(res => ({
					name: res.title,
					value: res.id,
					data: {
						...res
					}
				}))
			},
			
			/**
			 * 修改tabs
			 */
			setTabs(e) {
				this.tabsData = e.value
				this.init()
			},
			
			
			
			// 艺人-请求报名列表
			async getArtistList(params) {
				
				// if(this.tabsData !== ''){
				// 	params['status'] = this.tabsData
				// }
				
				const res = await getArtistListApi(params)

				if (res.code !== 200) {
					return
				}
				
				if(res.rows.length < 10){
					this.loadingType = 'noMore'
				}
				
				this.listData.push(...res.rows)

			},
			
			
	

		}
	}
</script>

<style lang="less" scoped>

	.artistSignUp {
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, 0.2) 100%);
		min-height: 100vh;
		
		.content{
			#padding(24rpx 0 0 0);
			.item{
				margin: 24rpx;
			}
		}

		
	}
</style>